<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建部门</title>
    <script src="./lib/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./lib/elementui-index.js"></script>
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/token.js"></script>
</head>
<body>
    <div id="app">
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
            <el-tag type="info">新建部门</el-tag>
            <el-form-item label="部门名称" prop="dname">
              <el-input v-model="form.dname"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addDept('form')">添加</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script>
        new Vue({
            el:"#app",
            data() {
                var checkdname = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('部门名称不能为空'));
                    }
                    else{
                        if(value > 10){
                            callback(new Error("字数不能大于10"))
                        }else{
                            callback()
                        }
                    }
                };
               
                return {
                    form: {  
                        dname:''    
                    },
                    rules: {
                        dname: [
                            { validator: checkdname, trigger: 'blur' }
                        ],
                       
                    }
                }
            },
            methods: {
                addDept(formName){
                    //axios.post("http://localhost:8002/orders/add",this.form)
                    axios.post("http://localhost:8001/dept/Dept/addDept",{
                        dname:this.form.dname,      

                    })
                    .then(res=>{
                        if(res.data !== null){
                            this.$message.success("添加成功")
                        }else{
                            this.$message.error("添加失败")
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>